<template>
	<gracePage headerBG="#F5F5F5" :bounding="false">
		<view slot="gHeader">
			<view class="grace-header-body grace-relative main-bodybg-color">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 text-center font-size-36" style="font-size:36rpx;">继续支付</text></view>
				<!-- 消息按钮 -->
				<text class="grace-header-icons my-icons"></text>
			</view>
		</view>
		<view slot="gBody" class="grace-flex-v1 main-bodybg-color pb-5" id="gBody">
			<!-- 全屏 Loading -->
			<graceFullLoading :graceFullLoading="graceFullLoading" logoUrl="/static/images/lodingbg.png"></graceFullLoading>
			<view class="grace-flex-center" style=" padding:30rpx 0;" v-if="dateDome">
				<graceCountDown
					:timer="countDown"
					borderColor="#1CA376"
					splitorColor="#1CA376"
					fontColor="#1CA376"
					bgrColor="none"
					:splitorText="['天', '时', '分', '秒']"
					v-on:endDo="endDo(2)"
				></graceCountDown>
			</view>
			<view class="grace-list-items grace-tbr-large mx-2 grace-bg-white mt-3">
				<view class="grace-list-body ml-0 pl-2">
					<view class="grace-list-title">
						<text class="grace-list-title-text grace-bold">{{ info.consignee }}</text>
					</view>
					<view class="grace-list-body-desc grace-bold">{{ info.province }}{{ info.city }}{{ info.district }}{{ info.address }}</view>
					<view class="grace-wrap">
						<view class="grace-list-body-desc font-size-26 grace-bold pr-1">电话：</view>
						<view class="grace-list-body-desc">{{ info.mobile }}</view>
					</view>
				</view>
			</view>

			<divider></divider>
			<view class="grace-tbr-large grace-bg-white mx-2">
				<view class="m-2">
					<view class="grace-space-between pt-1">
						<text class="grace-h5">臻选优品</text>
						<text class="grace-h5 grace-black9">正品保证</text>
					</view>
					<view class="grace-list my-2" v-for="(goods, indexItem) in goods" :key="indexItem">
						<view class="grace-list-items">
							<view class="my-list-image ucenter-face grace-relative">
								<image class="my-list-image ucenter-face-image" :src="goods.goods_img" mode="widthFix"></image>
							</view>
							<view class="grace-list-body">
								<view class="grace-list-title">
									<text class="my-list-title-text grace-h4 grace-ellipsis">{{ goods.goods_name }}</text>
								</view>
								<view class="grace-list-title py-1">
									<text class="my-list-title-text grace-black9 grace-text">{{ goods.goods_attr }}</text>
								</view>
								<view class="grace-space-between mt-1 grace-flex-vcenter">
									<text class="grace-h5 grace-red">￥{{ goods.goods_price }}</text>
									<text class="font-size-22 pr-2">x{{ goods.goods_number }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<divider v-if="info.son_order_sn"></divider>
			<view class="grace-tbr-large grace-bg-white mx-2" v-if="info.son_order_sn">
				<view class="m-2">
					<view class="grace-space-between pt-1">
						<text class="grace-h5">关联订单</text>
					</view>
					<view class="grace-wrap">
						<text class="pr-1 width-250">订单金额</text>
						<view class="pl-3 lea-msg">
							<text class="grace-gray ">{{info.son_order_amount}}</text>
						</view>
					</view>
					<view class="grace-wrap">
						<text class="pr-1 width-250">订单编号</text>
						<view class="pl-3 lea-msg">
							<text class="grace-gray ">{{info.son_order_sn}}</text>
						</view>
					</view>
				</view>
			</view>
			<divider></divider>
			<view class="py-2 grace-tbr-large grace-bg-white mx-2">
				<view class="mx-2">
					<radio-group name="danxuan" color="#1CA376">
						<view class="grace-form-item" v-for="(item, index) in payLists" :key="index">
							<view class="grace-flex grace-flex-vcenter">
								<image :src="item.icon" style="width: 46rpx;height: 46rpx;"></image>
								<text class="grace-form-label grace-black  ml-2">{{ item.text }}</text>
							</view>
							<view class="grace-form-body" style="padding:20rpx 0;text-align: right;">
								<label class="grace-check-item-v"><radio :value="item.value" :checked="index === current" @click="changePay(index)"></radio></label>
							</view>
						</view>
					</radio-group>
				</view>
			</view>
			<divider></divider>
			<view class="py-2 grace-tbr-large grace-bg-white mx-2">
				<view class="mx-2">
					<view class="grace-space-between pt-1">
						<text class="grace-h5">商品金额</text>
						<text class="grace-h5 grace-black9">￥{{ info.is_free == '1' ? 0 : info.goods_amount }}</text>
					</view>
					<view class="grace-space-between pt-1">
						<text class="grace-h5">优惠金额</text>
						<text class="grace-h5 grace-black9">￥{{coupon}}</text>
					</view>
					<view class="grace-space-between pt-1">
						<text class="grace-h5">运费</text>
						<text class="grace-h5 grace-black9">￥{{info.shipping_fee}}</text>
					</view>
				</view>
			</view>
			<divider></divider>
			<divider></divider>
			<divider></divider>
			<divider></divider>
			<divider></divider>
			<divider></divider>
			<divider></divider>
		</view>
		<!-- 底部导航 -->
		<view class="grace-footer grace-space-between" slot="gFooter">
			<view class="grace-grids" style="width:250rpx;">
				<view class="grace-wrap grace-flex-vcenter ml-3">
					<text class="">合计：</text>
					<text class="grace-h4 grace-red">￥{{ info.order_amount }}</text>
				</view>
			</view>
			<view class="grace-flex-end" style="width:460rpx;">
				<button type="primary" class="grace-button my-footer-button grace-white  mr-2 my-1 grace-tbr-large" @tap="gotoPay" :loading="submitPay" :disabled="disabled">
					支付
				</button>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import graceCountDown from '@/graceUI/components/graceCountDown.vue';
import graceFullLoading from '@/graceUI/components/graceFullLoading.vue';
const moment = require('@/common/js/moment.js');
import tools from '@/common/js/tools.js';
export default {
	data() {
		return {
			graceFullLoading: false,
			current: 0,
			info: {},
			countDown: 0,
			dateDome: false,
			// 避免重复提交
			submitPay: false,
			disabled: false,
			//提示时间已到 不可以支付
			goods: [],
		};
	},
	computed: {
		coupon(){
			if(this.info.is_free == '1') return 0;
			// return tools.accSub(this.info.goods_price,this.info.goods_amount);
			return 0;
		},
		payLists(){
			let arr = [];
			// #ifdef APP-PLUS 
			arr.push({
				text: '微信',
				icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
				name: 'wechat_app',
				provider: 'wxpay'
			})
			arr.push({
				text: '支付宝',
				icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
				name: 'alipay',
				provider: 'alipay'
			})
			// #endif
			// #ifdef MP 
			arr.push({
				text: '微信',
				icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
				name: 'miniapp',
				provider: 'wxpay'
			})
			// #endif
			console.log('arr',arr)
			return arr
		}
	},
	onShow() {},
	onLoad(e) {
		console.log(e);
		if (e.orderId) this.orderId = e.orderId;
		// 得到订单详情
		this.__init();
	},
	methods: {
		async __init() {
			this.graceFullLoading = true;
			console.log('this.orderId', this.orderId);
			let options = {
				act: 'get_info',
				order_id: this.orderId
			};
			let data = await this.$HTTP.post('/api/api.php', options, { token: true });
			console.log('datsdasd', data);
			this.info = data.info;
			this.goods = data.goods;
			this.countDown = moment(data.info.end * 1000).format('YYYY-MM-DD HH:mm:ss');
			this.dateDome = true;
			this.graceFullLoading = false;
			// this.getFreightFn(this.goods);
		},
		// 监听选中的支付方式
		changePay(e) {
			this.current = e;
		},
		async gotoPay() {
			if (this.submitPay) return;
			this.submitPay = true;
			let payMethod = this.payLists[this.current];
			// 获取支付方式和地址信息
			let options = {
				act: 'continue_pay',
				pay_type: payMethod.name,
				order_id: this.info.order_id
			};
			let data = await this.$HTTP.post('/api/api.php', options, { token: true });
			uni.requestPayment({
				provider: payMethod.provider,
				orderInfo: data,
				success: e => {
					uni.showToast({ title: '支付成功', icon: 'none', mask: true });
					// 跳转页面
					uni.navigateTo({
						url: '/pages/order/orderList/orderList?index=2'
					});
				},
				fail: e => {
					uni.showToast({ title: '支付失败', icon: 'none', mask: true });
				},
				complete: () => {
					this.submitPay = false;
				}
			});
		},
		endDo: function(index) {
			this.disabled = true;
			this.submitPay = 'true1';
		}
	},
	components: { gracePage, graceCountDown ,graceFullLoading}
};
</script>
<style scoped>
.my-list-image {
	width: 154rpx;
	height: 154rpx;
}
.my-footer-button {
	width: 210rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 30rpx;
	text-align: center;
}
.my-list-title-text {
	display: block;
	line-height: 40rpx;
}
</style>
